<template>
	<view id="page" :style="{'margin-top': navH + 'px'}">
		<!-- navbar<vuiData: 菜单项，switchNav: 自定义事件> -->
		<nav-bar :vuiData="navbar" @switchNav="switchNav"></nav-bar>
		<!-- tabbar<selected: 当前项> -->
        <tab-bar :selected="0"></tab-bar>
		<!-- 搜索条 -->
		<vui-csm :vuiData="searchbar" @showLoc="showLoc" @vuiSearch="goSearch"></vui-csm>
		<!-- 分类入口 -->
		<vui-entry :vuiData="entries" :vuiLen="5" @vuiEntry=""></vui-entry>
		<!-- 网红 -->
		<view class="figure">
			<!-- Tab组件 -->
			<vui-tab :vuiData="tabs" :index="ftab" @vuiTab="switchTab"></vui-tab>
			<view class="figure-cont">
				<view v-if="ftab === 0">
					<!-- Slider组件 -->
					<vui-slider :vuiData="s1" :vuiLen="5" @vuiTap1="" @vuiTap2=""></vui-slider>
				</view>
				<view v-else-if="ftab === 1">
					<!-- Slider组件 -->
					<vui-slider :vuiData="s2" :vuiLen="5"></vui-slider>
				</view>
			</view>
		</view>
			<!-- 问答 -->
			<!-- <view class="question">
				<navigator url="../question/index" hover-class="none" class="question-tab">热门问答</navigator>
				<block v-for="(it, k5) in questions" :key="k5">
					<view class="question-i" @click="goDetail(it.id)">
						<view class="col-2 lt">
							<image :src="it.img" lazy-load="true" @error="imgError2(k5)" v-if="it.img"></image>
							<image src="../../static/avatars_default.png" lazy-load="true" v-else></image>
							<text class="clamp clamp-1">{{it.name}}</text>
						</view>
						<view class="col-10 rt">
							<text class="up">问题：<text v-if="it.status == 1" style="color: #ff9d00;">已解决</text><text style="color: #888;" v-else>未解决</text></text>
							<text class="icon">问</text><text class="down">{{it.title}}</text>
						</view>
					</view>
				</block>
			</view> -->
			<!-- 图文列表 -->
			<vui-pictxt :vuiData="pictxt"></vui-pictxt>
			<!-- <pic-txt :vuiData="lists"></pic-txt> -->
			<!-- <view class="nomore" :hidden="!isLoad"><image src='../../static/nomore_img.png' mode="widthFix"></image><text>没有更多了~</text></view> -->
		
		<vui-scope-login :vuiData="props" @action="showLogin"></vui-scope-login>
		
	</view>
</template>

<script>
	import VuiCsm from '@/components/default/vui-csm.vue'
	import VuiEntry from '../../components/default/vui-entry.vue'
	import VuiTab from '../../components/default/vui-tab.vue'
	import VuiSlider from '../../components/default/vui-slider.vue'
	import VuiPictxt from '../../components/default/vui-pictxt.vue'
	
	import VuiScopeLogin from '@/components/default/vui-scope.vue'
	
	import PictxtNearby from '../../components/pictxtnearby/index.vue'
	import app from '../../common/index.js'
	export default {
		name: 'index',
		data() {
			return {
				navbar: { // vui-navbar
					isBack: false, // 是否显示返回
					title: null, // 页面标题
					nav: ['文字', '文字', '文字'], // 导航
				},
				searchbar: { // vui-csm
					icons: {
						c: '../../static/12.png',
						s: '../../static/25.png',
						m: '../../static/1.png',
					},
					tips: '大家都在搜索',
					ms: true, // 是否显示消息
					ct: true, // 是否显示城市
					fixed: false, // 是否脱离文档流固定
				},
				entries: [ // vui-entry
					{id: 0, icon: '', name: '文字'},
					{id: 1, icon: '', name: '文字'},
				],
				tabs: ['文字', '文字'], // vui-tab
				userInfo: {},
				isLogin: false,
				index: 2,
				ftab: 0,
				s1: [
					{id: 0, icon: '', name: '文字'},
					{id: 1, icon: '', name: '文字'},
					{id: 2, icon: '', name: '文字'},
					{id: 3, icon: '', name: '文字'},
					{id: 4, icon: '', name: '文字'},
					{id: 5, icon: '', name: '文字'}
				],  // 列表
				s2: [
					{id: 0, icon: '', name: '文字'},
					{id: 1, icon: '', name: '文字'}
				],  // 列表
				questions: [],  // 热门问答
				page: 1,
				size: 2,
				pictxt: { // vui-pictxt
					isWater: true, // 是否流体布局
					isLoad: true, // 触底加载开关
					lists: [], // 数据列表
				},
				props: {
					scope: 0,
					isShow: false,
					title: '登录授权',
					content: '申请获取以下权限\n获得你的公开信息(昵称，头像)'
				}
			}
		},
		components: {
			VuiCsm,
			VuiScopeLogin,
			VuiEntry,
			VuiTab,
			VuiSlider,
			VuiPictxt,
			PictxtNearby,
		},
		onLoad() {
			uni.hideTabBar();
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			if(!this.userInfo.id) {
				this.props.isShow = true;
			}
			this.getQuestions();
			this.getPicTxt();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.questions = [];
			this.lists = [];
			this.getQuestions();
			this.getPicTxt();
			uni.stopPullDownRefresh();
		},
		// 上划加载
		onReachBottom() {
			if(this.pictxt.isLoad) {
				this.page += 1;
				this.getPicTxt();
			}
		},
		// 分享转发
		onShareAppMessage() {
			return {
				title: '爱美指南针',
				path: 'pages/index/index',
			}
		},
		methods: {
			/**
			 * @des 登录提示框
			 */
			showLogin(b) {
				this.props.isShow = b;
				this.isLogin = false;
			},
			/**
			 * @des 获取首页热门问答
			 */
			getQuestions() {
				this.questions = [
					{grade : 0, id : 9, img : '../../static/avatars_default.png', name : "清", status : "0", title : "问答标题", user_id : "4"},
					{grade : 0, id : 9, img : '../../static/avatars_default.png', name : "清", status : "0", title : "问答标题", user_id : "4"},
				];
			},
			/**
			 * @des 获取图文列表
			 */
			getPicTxt() {
				const ret = {
					data: {
						data: [
							{id:1,grade:0,img:'../../static/default.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:3,grade:0,img:'../../static/default.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:8,grade:0,img:'../../static/default.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:0,grade:0,img:'../../static/default_2.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:7,grade:0,img:'../../static/default.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:9,grade:0,img:'../../static/default.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:2,grade:0,img:'../../static/default_2.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:4,grade:0,img:'../../static/default_2.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:6,grade:0,img:'../../static/default_2.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:5,grade:0,img:'../../static/default_2.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:10,grade:0,img:'../../static/default_2.jpg',ava:'',name:"清",title:"标题",zan:"1"},
							{id:11,grade:0,img:'../../static/default.jpg',ava:'',name:"清",title:"标题",zan:"1"},
						],
					}
				};
				if(this.page <= 5) {
					let d = ret.data, len = d.data.length;
					this.pictxt.lists = d.data.slice(this.page*2, this.page*2+2) ;
					// this.pictxt.isLoad = this.size > len ? false : true;
				}else {
					this.pictxt.isLoad = false;
				}
				
			},
			/**
			 * @param {Number} i navbar切换的当前index 
			 */
			switchNav(i) {
				console.log(i)
				this.index = i;
			},
			/**
			 * @param {Number} i Tab切换的当前index 
			 */
			switchTab(i) {
				this.ftab = i;
			},
			/**
			 * @des 打开问答详情
			 */
			goDetail(id) {
				uni.navigateTo({
					url: '../qdetail/index?id='+ id
				})
			},
			/**
			 * @des 打开搜索页
			 */
			goSearch() {
				uni.navigateTo({
					url: '../search/index'
				})
			},
			/**
			 * @des 图片加载未成功触发
			 */
			imgError(e) {
				let d = e.currentTarget.dataset, kp = d.kp, ks = d.ks, tmpFigure = this.waho;
				tmpFigure[kp][ks].logo = '../../static/avatars_default.png';
				this.waho = tmpFigure;
			},
			imgError3(e) {
				let d = e.currentTarget.dataset, kp = d.kp, ks = d.ks, tmpFigure = this.daka;
				tmpFigure[kp][ks].img = '../../static/avatars_default.png';
				this.daka = tmpFigure;
			},
			imgError2(i) {
				let tmpQuestions = this.questions;
				tmpQuestions[i].img = '../../static/avatars_default.png';
				this.questions = tmpQuestions;
			}
		}
	}
</script>

<style>
	
	.figure {margin-top: 20upx; background-color: #fff;}
	/* 入口 */
	.entry {display: flex; justify-content: space-between; margin-top: 20upx; padding: 20upx; background-color: #fff;}
	.entry .lt {flex: 1; margin-right: 12upx;}
	.entry .rt {flex: 1; flex-direction: column;}
	.entry .rt navigator:last-child {margin-top: 12upx;}
	.entry image {width: 100%; border-radius: 3px;}
</style>
